<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> 
<!DOCTYPE html>
<style type="text/css">
	#d_tag2 { position:absolute; z-index:101; float:left; left:4px; top:2px;  
	          font-size:12px;
              font-family:Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;width: auto;}   
	#d_tag2 span { cursor:default; border:solid 1px #ccc; background-color:#ffffcc; border-radius:5px; padding:2px 4px; margin-right:4px;display: inline-block;}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/seriesComboBoxs/jquery.seriesComboBoxs.js" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){ 
		$.seriesComboBoxs({
			 		selects : ["#firstSelect","#secondSelect"],
			 		defaultParentId : 500,
			 		ajaxOptions : {"url" : "${pageContext.request.contextPath}/knowledgebase/knowlegeAction!initSeriesComboBoxs.action?codeType=knowledgeType&tableName=TD_KNOWLEDGE_MANAGER"},
			 		jsonField : {
						region_id : "codeValue",
						region_name : "codeName",
						parent_id : "parentId"
					},
				    listeners : {
							render : function(){
								$("#secondSelect").hide(); 
							},
							optionClick : function(index,option,aSelect){
								if(index==0&&option[0].value!=''){
									$("#secondSelect").show();
								}
								if(index==0&&option[0].value==''){
									$("#secondSelect").hide(); 
								}
							} 
					  }
				});
		
		$('#txtTag2').blur(formatTag2).keydown(tagKeydown);
	}); 
	
	function formatTag2(flag) {
   	    if ($.trim($('#txtTag2').val())) { 
        var tt = '';
        $('#d_tag2 span').each(function () {
            tt += this.innerHTML + ',';
        });
        tt += $.trim($('#txtTag2').val()).replace(/[^\u4e00-\u9fa5\w\s\-+.#,，]+/g, '');
        tt = $.trim(tt).split(/[,，]+/g);
        var s = [];
        for (var i = 0; i < tt.length; i++) {
            if (!s.has(tt[i])) {
                s.push($.trim(tt[i]).slice(0, 15));
            }
            if (s.length == 3) break;
        }
        var str = '';
        for (var i = 0; i < s.length; i++) {
            str += '<span>' + s[i] + '</span>';
        }
        $('#d_tag2').html(str);
        $('#d_tag2 span').click(function () {
            $(this).remove();
            formatTag2();
        }).attr('title', '单击删除该标签');
    }
    var w = $('#d_tag2').width();
    $('#txtTag2').css('width',(576-w)+'px');    
    $('#txtTag2').css('padding-left',(w + 2)+'px'); 
    $('#txtTag2').val(' ');   
    
    getKeywords();
}
	
function tagKeydown(ev) {
    var code = (ev ? ev.which : event.keyCode);
    if (code == 13) { 
        //如果是回车键
//         var ss = $('#d_tag2 span');
//         if (ss.length > 0) {
//             ss.eq(ss.length - 1).remove(); 
//             formatTag2();
//         }
    	return false;
    }
}

Array.prototype.has = function (a) {
    for (var i = 0; i < this.length; i++) {
        if (this[i].toLowerCase() == a.toLowerCase())
            return true;
    }
    return false;
};
function getKeywords(){
	var keywords = [];
	var words = $("#d_tag2").find("span");
	words.each(function(){
		keywords.push($(this).html());
	});
	var k = keywords.join(",");
	$("#handleKeyWord").val(k);
}
function addKnowledge(){
	
	var typeL = $("#firstSelect").val();
	var typeS = $("#secondSelect").val();
	var keyW = $("#handleKeyWord").val(); 
	if($.trim(keyW)==''){
		//alert("请填写关键词!");
		$.messager.alert('提示', '请填写关键词!'); 
		return "0";
	}
	if(typeL==''){
		$.messager.alert('提示', '请选择知识类型!'); 
		return "0";
	}
	if(typeS==''){
		$.messager.alert('提示', '请选择知识类型!'); 
		return "0";
	}
	return "1";
}
</script>
 <div style="height:140px">   
	<form id="problem_edit_form" method="post">
	 	<table style="margin: 20px 0 20px 5px">
	 		<tr>
	 			<td style="font:normal 12px/26px Helvetica, Tahoma, Arial, sans-serif; text-align:right;">关键词(tag):&nbsp;</td>
	 			<td style="height:28px;width:500px">
					<div style="position:relative;">
					<div id="d_tag2"></div>
					<input type="text" id="txtTag2" style="width: 578px;height:23px;border:solid 1px #ccc; color:#666;" maxlength="100">
					</div>
	 			</td>
	 		</tr>
	 		<tr> 
	 			
	 			<td>&nbsp;</td>
	 			<td style="color:#999 !important;">单个tag不多于15个字符，多个关键字请用","分隔，最多填写3个,点击删除标签</td>
	 		</tr>
	 		<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
		    <tr>
		      <td style="font:normal 12px/26px Helvetica, Tahoma, Arial, sans-serif; text-align:right">知识类型:&nbsp;</td>
		      <td style="height:28px;width:500px">
		      		<select id="firstSelect" name="knowledgeOneType" style="width:120px; height:23px; border:solid 1px #ccc; color:#666; line-height:25px;">
    					<option value="">请选择</option>
    				</select>
    				<select id="secondSelect" name="knowledgeTwoType" style="width:120px; height:23px; border:solid 1px #ccc; color:#666; line-height:25px;">
    					<option value="">请选择</option>
    				</select>
    			</td>
		     </tr>
	    </table>
	    <input type="hidden" id="handleKeyWord" name="keyWord"/>
	    <input type="hidden" name="problemId" value="${problemId}"/>
 	</form>
 </div>